<template>
    <view class="absolute bg-blackx w-full min-h-full box-border p-4">
        <!-- 头部 -->
        <view class="flex flex-col bg-blackxlight rounded-2xl justify-center items-center p-6 gap-4">
            <text class="text-whitexlight">{{page_config.current_coin_name}}</text>
            <text class="text-whitex text-3xl font-bold">{{page_config.coin_balance}}</text>
            <view class="rounded-full  text-center px-14 py-2 text-lg"
                :class="page_config.is_today_sign_in?'text-whitex/50 bg-bluex/40':'text-whitex bg-bluex'"
                @click="doSignIn">
                立即签到
            </view>
        </view>
        <view class="mt-4">
            <text
                class="text-whitex font-bold text-sm leading-none border-0 border-l-4 border-bluex border-solid pl-2">签到规则</text>
            <view class="bg-bluex rounded-t-2xl p-4 mt-4">
                <text class="text-whitex">{{page_config.list_title}}</text>
            </view>
            <view class="bg-blackxlight rounded-b-2xl p-4">
                <view class="flex flex-wrap w-full box-border">
                    <view class="w-1/4 p-1 my-1 box-border" v-for="i,k in page_config.sign_in_coin_list" :key="k">
                        <view
                            class="flex flex-col gap-1 items-center justify-evenly box-border border border-solid border-bluex rounded-lg overflow-hidden">
                            <view class="bg-bluex w-full text-center p-1 box-border">
                                <text class="text-whitex text-center text-xs">
                                    {{i.title}}
                                </text>
                            </view>
                            <view
                                class="w-full text-center p-1 box-border flex flex-col gap-1 items-center justify-between">
                                <uv-icon :name="i.consecutive_day<=page_config.consecutive_days?'star-fill':'star'"
                                    :color="whitex" size="20"></uv-icon>
                                <text
                                    class="text-whitex text-center text-xs">{{i.amount}}{{page_config.coin_name}}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="mt-4">
            <text
                class="text-whitex font-bold text-sm leading-none border-0 border-l-4 border-bluex border-solid pl-2">温馨提示</text>
            <view class="bg-blackxlight rounded-2xl p-4 mt-4">
                <text class="text-whitexlight leading-relaxed">
                    {{page_config.check_in_rule}}
                </text>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        colors
    } from '../../consts/colors';
    import {
        errorCode
    } from '../../consts/datas';
    import {
        signIn,
        signInAuthPageData
    } from '../../http/api';

    export default {
        data() {
            return {
                whitex: colors.whitex,
                page_config: {
                    is_today_sign_in: false,
                    consecutive_days: 0,
                    sign_in_coin_list: [],
                    coin_name: '',
                    current_coin_name: '',
                    list_title: '',
                    coin_balance: 0,
                    check_in_rule: '',
                },
            };
        },
        methods: {
            async getPageData() {
                const res = await signInAuthPageData()
                console.log(res);
                this.page_config = res.data
            },
            async doSignIn() {
                // if (this.page_config.is_today_sign_in) {
                //     console.log("已签到");
                //     return;
                // }
                uni.showLoading({
                    mask: true,
                    title: "签到中..."
                })
                const res = await signIn()
                console.log(res);
                if (res.code == errorCode.error) {
                    uni.showToast({
                        icon: 'none',
                        title: res.message,
                    })
                    return
                }
                uni.showToast({
                    icon: 'success',
                    title: res.message,
                })
                this.getPageData()
            }
        },
        onLoad() {
            this.getPageData()
        }
    };
</script>

<style>

</style>